<template>
	<view class="container">
		<view class="page-foot">
			<Footer :identity="3" :footState="0"></Footer>
		</view>
		<!-- 店铺头部信息 -->
		<view class="shop-header" v-if="shopInfo.shop_name">
			<image :src="shopInfo.xilufitness_urls.shop_logo_image" class="shop-logo" mode="aspectFill"></image>
			<view class="shop-basic">
				<text class="shop-name">{{ shopInfo.shop_name || ''
				 }}</text>
				<view class="shop_star">门店等级 <text class="star-text">{{ shopInfo.star ||0 }} 级</text></view>
				<!-- 	<view class="shop-status" :class="getStatusClass(shopInfo.shop_status)">
					{{ shopInfo.shop_status | statusText }}
				</view> -->
				<!-- 	<view class="shop-meta">
					<text class="meta-item" v-if="shopInfo.shop_address">地址：{{ shopInfo.shop_address }}</text>
					<text class="meta-item" v-if="shopInfo.shop_phone">电话：{{ shopInfo.shop_phone }}</text>
				</view> -->
			</view>
		</view>

		<!-- Tabs -->
		<view class="tabs">
			<view v-for="(tab, index) in tabs" :key="index" :class="['tab-item', activeTab === index ? 'active' : '']"
				@click="switchTab(index)">
				{{ tab }}
			</view>
		</view>
		<!-- Tabs内容 -->

		<!-- Tabs内容 -->
		<view class="tab-content">
			<!-- 机构信息 -->
			<view v-if="activeTab === 0">
				<view class="section">
					<view class="section-title">门店简介</view>
					<text class="section-text">{{ shopInfo.shop_info || '' }}</text>
				</view>
				<view class="section">
					<view class="section-title">门店信息</view>
					<view class="section-text">店长：{{ shopInfo.shop_contacts || '' }}</view>
					<view class="section-text">手机号：{{ shopInfo.shop_mobile || '' }}</view>
					<view class="section-text">门店地址：{{ shopInfo.address || ''}}</view>
				</view>
				<view class="section">
					<view class="section-title">门店照片</view>
					<image :src="shopInfo.xilufitness_urls.shop_image" class="shop-image" mode="widthFix"></image>
				</view>
				<view class="section">
					<view class="section-title">培训特色</view>
					<view style="color: #fff;">
						<mp-html class="mb30" :content="shopInfo.train_trait"></mp-html>
					</view>
				</view>

				<view class="section">
					<view class="section-title">培训环境</view>
					<swiper class="swiper" circular :indicator-dots="false" :autoplay="false" :duration="500"
						>
						<swiper-item v-for="(item, index) in shopInfo.xilufitness_urls.train_vibe_videos">

							<!-- <video :id="'videos' + index" :src="item" @play="videoTrainPlay"></video> -->
					<image :src="item" class="shop-image" mode="widthFix" style="    width: 100%;"></image>

						</swiper-item>


					</swiper>


				</view>

				<view class="section">
					<view class="section-title">培训视频</view>
					<swiper class="swiper" circular :indicator-dots="false" :autoplay="false" :duration="500"
					>
						<swiper-item class="swiper_items" v-for="(item, index) in shopInfo.xilufitness_urls.train_videos">

							<video :id="'video' + index" :src="item" @play="videoTrainPlay"></video>

						</swiper-item>

					</swiper>


				</view>
				<view class="section">

					<!-- <view class="stars">
						<view v-for="n in 5" :key="n" class="star"
							:class="n <= Math.floor(shopInfo.star) ? 'filled' : ''">★</view>
					</view> -->

				</view>
			</view>


			<!-- 机构教练 -->
			<view v-if="activeTab === 1">
				<view class="section-title">教练团队</view>
				<view class="coach-list">
					<view class="coach-item" v-for="coach in coaches" :key="coach.id">
						<image :src="coach.xilufitness_urls.coach_avatar" class="coach-avatar"></image>
						<view class="coach-info">
							<view class="coach-header">
								<text class="coach-name">{{ coach.coach_name }}</text>
								<view class="coach-group" v-if="coach.group_name">
									<image v-if="coach.group_image" :src="coach.group_image" class="group-icon"></image>
									<text>{{ coach.group_name }}</text>
								</view>
							</view>
							<view class="coach-labels">
								<text v-for="label in coach.lable_list" :key="label"
									class="coach-label">{{ label }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>




		</view>





	</view>
</template>


<script>
	export default {
		data() {
			return {
				activeTab: 0,
				tabs: ['机构信息', '机构教练'],
				shopInfo: {},
				coaches: []
			}
		},
		mounted() {
			this.getShopInfo();
			this.getCoaches();
		},
		methods: {
			switchTab(index) {
				this.activeTab = index;
			},
			getShopInfo() {
				this.$http({
					url: '/addons/xilufitness/shop/getShopInfo'
				}).then(res => {
					this.shopInfo = res.data.info || {};
				});
			},
			getCoaches() {
				this.$http({
					url: '/addons/xilufitness/shop/getCoach'
				}).then(res => {
					this.coaches = res.data.list || [];
				});
			},
			getStatusClass(status) {
				return status == 1 ? 'active' : 'inactive';
			}

		},
		filters: {
			statusText(val) {
				return val == 1 ? '营业中' : '休息中';
			}
		}
	}
</script>
<style>
	.stores_logo {
		width:120rpx;
		height: 120rpx;
		margin:0 10rpx;
		border-radius: 50%;
	}
	.swiper_items {
		width: 95% !important;
	
	}
	.swiper {
		height: 350rpx;
	}
	.xilu_box {
		background: #292B2C;
		border-radius: 20rpx;
		width: 100%;
		margin-top: 30rpx;
		padding: 30rpx;
	}
	
	.container {
		padding: 20rpx;
		background-color: #E8EEFE;
		min-height: 100vh;
		color: #e0e0e0;
	}

	.shop-header {
		display: flex;
		background: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		border: 1rpx solid #E8EEFE;
	}

	.shop-logo {
		width: 160rpx;
		height: 160rpx;
		border-radius: 8rpx;
		margin-right: 30rpx;
		border: 1rpx solid #444;
	}

	.shop-basic {
		flex: 1;
	}

	.shop-name {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 15rpx;
		display: block;
	}

	.shop-status {
		display: inline-block;
		padding: 6rpx 20rpx;
		border-radius: 20rpx;
		font-size: 24rpx;
		margin-bottom: 20rpx;
	}

	.shop-status.active {
		background: rgba(139, 195, 74, 0.2);
		color: #8BC34A;
	}

	.shop-status.inactive {
		background: rgba(244, 67, 54, 0.2);
		color: #F44336;
	}

	.shop-meta {
		margin-top: 15rpx;
	}

	.meta-item {
		display: block;
		font-size: 24rpx;
		color: #aaa;
		margin-bottom: 10rpx;
	}

	/* Tab栏样式 */
	.tabs {
		display: flex;
		background: #fff;
		border-radius: 12rpx;
		margin-bottom: 30rpx;
		border: 1rpx solid #E8EEFE;
	}

	.tab-item {
		flex: 1;
		text-align: center;
		padding: 25rpx 0;
		font-size: 28rpx;
		color: #aaa;
		position: relative;
	}

	.tab-item.active {
		color: #FFCF00;
	}

	.tab-item.active:after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 60%;
		height: 4rpx;
		background: #FFCF00;
		border-radius: 2rpx;
	}

	/* 内容区样式 */
	.tab-content {
		background: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
		border: 1rpx solid #E8EEFE;
		    margin-bottom: 118rpx;
	}

	.section {
		margin: 20rpx 0;
	}

	.shop_star {
		font-size: 30rpx;
		font-weight: bold;
		color: #FFCF00;
		margin-bottom: 25rpx;
		padding-bottom: 15rpx;
	}

	.section-title {
		font-size: 30rpx;
		font-weight: bold;
		color: #FFCF00;
		margin-bottom: 25rpx;
		padding-bottom: 15rpx;
		border-bottom: 1rpx solid #E8EEFE;
	}

	.info-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 20rpx;
		margin-bottom: 40rpx;
	}

	.info-item {
		background: #252525;
		border-radius: 8rpx;
		padding: 20rpx;
		border: 1rpx solid #333;
	}
	.section-text{color:#333}
	.info-label {
		font-size: 24rpx;
		color: #aaa;
		display: block;
		margin-bottom: 10rpx;
	}

	.info-value {
		font-size: 28rpx;
		color: #fff;
		display: block;
	}

	.stars {
		display: flex;
		margin-top: 5rpx;
	}

	.shop-intro {
		font-size: 28rpx;
		line-height: 1.6;
		color: #ccc;
	}

	/* 等级卡片样式 */
	.level-card {
		background: #252525;
		border-radius: 12rpx;
		padding: 30rpx;
		border: 1rpx solid #333;
	}

	.level-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.level-title {
		font-size: 28rpx;
		color: #fff;
	}

	.level-stars {
		display: flex;
	}

	.level-progress {
		margin-bottom: 40rpx;
	}

	.level-progress text {
		display: block;
		font-size: 26rpx;
		margin-bottom: 15rpx;
	}

	.progress-text {
		text-align: right;
		margin-top: 10rpx;
		color: #FFCF00;
	}

	.level-rules {
		border-top: 1rpx solid #333;
		padding-top: 20rpx;
	}

	.rule-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #2a2a2a;
	}

	.rule-item:last-child {
		border-bottom: none;
	}

	.rule-name {
		font-size: 26rpx;
		color: #fff;
		width: 150rpx;
	}

	.rule-value {
		font-size: 26rpx;
		color: #aaa;
		flex: 1;
		text-align: center;
	}

	.rule-status {
		font-size: 26rpx;
		width: 120rpx;
		text-align: right;
	}

	.rule-status.completed {
		color: #8BC34A;
	}

	/* 教练列表样式 */
	.coach-list {
		margin-top: 20rpx;
	}

	.coach-item {
		display: flex;
		align-items: center;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #333;
	}

	.coach-avatar {
		width: 110rpx;
		height: 110rpx;
		border-radius: 50%;
		margin-right: 26rpx;
		border: 2rpx solid #FFCF00;
	}

	.coach-info {
		flex: 1;
	}

	.coach-header {
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.coach-name {
		font-size: 30rpx;
		font-weight: bold;
		color: #fff;
		margin-right: 18rpx;
	}

	.coach-group {
		display: flex;
		align-items: center;
		background: #222;
		border-radius: 20rpx;
		padding: 2rpx 12rpx;
		font-size: 22rpx;
		color: #FFCF00;
	}

	.group-icon {
		width: 28rpx;
		height: 28rpx;
		border-radius: 50%;
		margin-right: 6rpx;
	}

	.coach-labels {
		margin-top: 8rpx;
		display: flex;
		flex-wrap: wrap;
		gap: 10rpx;
	}

	.coach-label {
		background: #444;
		color: #fff;
		font-size: 22rpx;
		border-radius: 16rpx;
		padding: 2rpx 16rpx;
	}
</style>